<template>
    <main-wrap ref="mianEle" :loading="true" :load="onLoad" :end="page.finished">
        <template v-slot:header> 
                <Header title="AR地标"/>
                <div class="dingwei" v-if="currentPosition.location"><i class="iconfont icon-ditu-dibiao"></i><span>{{currentPosition.location}} </span></div>
                <ar-province @change="getTabData"/>
        </template>
        
        <ul class="shopLst">
            <li v-for="dt in page.lists" :key="dt.arLandmarkId">
                <a @click="goDetail(dt)">
                    <div class="conTopBox">
                        <div class="imgbbox">
                            <Image :url="dt.headImageUrl"/>
                        </div>
                        <div class="listTxt">
                            <h4><div class="title">{{dt.name}}</div></h4>
                            <div class="introduce">{{dt.subtitle}}</div>
                            <div class="mark">
                                <i class="iconfont icon-ditu-dibiao"></i>
                                <template v-if="dt.provinceName==dt.cityName">{{dt.cityName}},{{dt.districtName}}</template>
                                <template v-else>{{dt.provinceName}},{{dt.cityName}}</template>
                            </div>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed,getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import {Icon as vanIcon} from 'vant'
import Header from '@/components/header.vue'
import mainWrap from '@/components/mainWrap.vue'
import Sort from './components/sort.vue'
import mySearch from '@/components/mySearch.vue'
import Image from '@/components/image.vue'
import arProvince from './components/arProvince.vue'
export default {
    components:{
        mainWrap,
        Header,
        Sort,
        mySearch,
        Image,
        vanIcon,
        arProvince
    },
    setup(){
        const store = useStore()
        const router = useRouter()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            keyword:'',
            provinceName:'',
            placeholder:"",
            page:{
                lists:[],
                pageIndex:1,
                pageSize:20,
                finished: false
            },
            sort:{
                orderField: 1,
                orderType: "desc"
            },
            st:'',
            currentPosition:computed(()=>store.state.arApi.currentPosition), //当前定位
            address:''
        })

        onMounted(async()=>{
           onLoad()
        })

        const onLoad = ()=> {
            state.st && clearTimeout(state.st)
            
            state.sort.orderField >2 && (state.sort.orderField=2) // 临时加入,按广告位排序，接口暂未实现
 
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                state.st = setTimeout(async () => {
                    const res = await store.dispatch("arApi/get_arlandmark_list", {
                        page: state.page.pageIndex,
                        limit: state.page.pageSize,
                        arLandmarkName: state.keyword,
                        provinceName:state.provinceName,
                        ...state.sort, 
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    if (state.page.lists.length >= res.total) {
                        state.page.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

        const resetScroll = async()=>{
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }

        const sortData = async(obj) =>{
            state.sort = obj
            resetScroll()
        }
        const getSearchData = async(keyword)=>{
            state.placeholder = ''
            //state.keyword = keyword
            resetScroll()
        }
        const getTabData = (name)=>{
            state.provinceName = name=='全部'?'':name
            resetScroll()
        }

        const goDetail = (o)=>{
            router.push(`/landmark/${o.arLandmarkId}?lat=${o.locationLatitude || 0}&lng=${o.locationLongitude || 0}`)
        }

        const onscroll = top =>{
            const dwEle = document.querySelector('.dingwei')  // 头部定位信息div
            const provEle = document.querySelector('.provinceBox') // 头部显示省份div
            const searchEle = document.querySelector('.searchBox') // 头部搜索div
            const dw_h = dwEle?dwEle.offsetHeight:0
            if(top > (dw_h + provEle.offsetHeight + searchEle.offsetHeight)){
                dwEle && (dwEle.style.display = 'none')
                provEle.style.display = 'none'
                searchEle.style.display = 'none'
            }else{
                dwEle && (dwEle.style.display = 'flex')
                provEle.style.display = 'block'
                searchEle.style.display = 'flex'
            }
        }

        return {
            ...toRefs(state),
            onLoad,
            sortData,
            getSearchData,
            goDetail,
            //onMapLoaded,
            getTabData,
            onscroll
        }
    }
}
</script>

<style lang="scss" scoped>
    .collection{
        background-image: url('/images/clbg.png');
        background-position:left top;
        background-repeat: no-repeat;
        background-size:100% auto ;
    }
    .dingwei{
        display: flex;
        align-items: center;
        height: 60px;
        line-height: 60px;
        background: #014343;
        padding: 0 40px;
        font-size: 26px;
        i{
            font-size: 24px;
            color: var(--baseColor);
            padding: 0 5px 0 0;
        }
        span{
            flex: 1;
            width: 0;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
        }
    }
    
    .ctopBox{
        padding: 0 40px 0 40px;
    }
    .shopLst{
        list-style: none;
        padding: 40px;
        padding-bottom: 0;
        margin: 0;
        li{   
            width: 100%;
            margin: 0 0 30px 0;
            padding: 0 0 30px 0;
            border-bottom:1px solid rgba(255, 255, 255, 0.2);
            a{
                display: block;
                width: 100%;
                padding: 0;
                .conTopBox{
                    display: flex;
                }
                .imgbbox{
                    display: block;
                    width: 140px;
                    height: 140px;
                    flex-shrink: 0;
                }
                .listTxt{
                    flex: 1;
                    padding: 0 0 0 20px;
                    overflow:hidden;
                    h4{
                        display: flex;
                        height: 40px;
                        line-height: 40px;
                        overflow:hidden;
                        .title{
                            flex: 1;
                            overflow:hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            width: 0;
                            font-weight: 500;
                            font-size: 28px;
                        }
                        span{
                            width: 80px;
                            display: flex;
                            justify-content:end;
                            flex-shrink: 0;
                        }
                    }
                    .introduce{
                        max-height: 72px;
                        font-size: 26px;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 0.5);
                        line-height: 36px;
                        margin: 10px 0 0 0;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    .mark{
                        display: flex;
                        align-items: center;  
                        font-size: 24px;
                        font-weight: 500;
                        margin: 14px 0 0 0;
                        i{
                            font-size: 24px;
                            color: var(--baseColor);
                            padding: 0 5px 0 0;
                        }
                    }
                }
                .jyNumberBox{
                    display: flex;
                    height: 96px;
                    background: rgba(14, 97, 97, 0.3);
                    margin: 20px 0 0 0;
                    text-align: center;
                    line-height: normal;
                    .item{
                        flex: 1;
                        h5{
                            font-size: 30px;
                            font-weight: 500;
                            padding: 10px 0 0 0;
                        }
                        p{
                            font-size: 28px;
                            color: #728686;
                            padding: 0;
                            transform: scale(0.8);
                            -webkit-transform: scale(0.8);
                        }
                        &+.item{
                            border-left:1px solid rgba(0,0,0,1) ;
                        }
                    }
                }
                .tabIntroduce{
                    display: flex;
                    height: 96px;
                    margin: 1px 0 0 0;
                    text-align: center;
                    line-height: normal; 
                    .item{
                        flex: 1;
                        overflow: hidden;
                        &:nth-child(2n+1){
                            background: rgba(14, 97, 97, 0.3);
                        }
                        &:nth-child(2n){
                            background: rgba(14, 97, 97, 0.15);
                        }
                        h5{
                            font-size: 26px;
                            font-weight: 500;
                            padding: 4px 0 0 0;
                            transform: scale(0.8);
                            -webkit-transform: scale(0.8);
                        }
                        p{
                            height: 24px;
                            line-height: 24px;
                            font-size: 24px;
                            color: var(--baseColor);
                            padding: 0;
                            overflow: hidden;
                            margin: 16px 0 0 0;
                            transform: scale(0.9);
                            -webkit-transform: scale(0.9);
                        }
                    }
                }
            }
            
        }
    }
</style>